<template>
  <div class="dataVisualize-box">
    <div class="card top-box">
      <div class="top-content">
        <el-row class="el-row" :gutter="40">
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <div class="item-left sle">
              <span class="left-title">总订单数量</span>
              <div class="img-box">
                <img src="./images/book-sum.png" alt="" />
              </div>
              <span class="left-number">{{ allOrderNumber }}</span>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="4" :xl="8">
            <div class="item-center">
              <div class="today-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/task_today.svg" alt="" />
                </div>
                <span class="item-value">{{ todayOrderNumber }}</span>
                <span class="traffic-name sle">今日订单数量</span>
              </div>
              <div class="yesterday-traffic traffic-box">
                <div class="traffic-img">
                  <img src="./images/pay_today.svg" alt="" />
                </div>
                <span class="item-value">{{ todaySale }}</span>
                <span class="traffic-name sle">今日订单总金额</span>
              </div>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
            <div class="item-right">
              <div class="echarts-title">7日内商品销量 top8</div>
              <div class="book-echarts">
                <Pie ref="pieRef" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="dataVisualize">
import { ref, onMounted } from "vue";
import Pie from "./components/pie.vue";
// import { getTopSale, orderStatistics } from "@/api/modules/custom";
import { Custom } from "@/api/interface";

const allOrderNumber = ref(24);
const todayOrderNumber = ref(6);
const todaySale = ref(1999 * 6);
const pieRef = ref();
const topSale = ref<Custom.ReqTopGoods[]>([
  { goodsName: "Apple iPhone 14 Pro", goodsSale: 1204 },
  { goodsName: "荣耀Magic V2", goodsSale: 1060 },
  { goodsName: "Apple iPhone 13", goodsSale: 750 },
  { goodsName: "Redmi Note11T Pro", goodsSale: 630 },
  { goodsName: "Redmi K60 骁龙", goodsSale: 601 },
  { goodsName: "OPPO K10", goodsSale: 550 },
  { goodsName: "vivo iQOO", goodsSale: 481 },
  { goodsName: "realm真我10 Pro", goodsSale: 310 }
]);

onMounted(async () => {
  // allOrderNumber.value = (await orderStatistics()).data.allOrderNumber;
  // todayOrderNumber.value = (await orderStatistics()).data.todayOrderNumber;
  // todaySale.value = (await orderStatistics()).data.todaySale;
  // topSale.value = (await getTopSale()).data;
  const pieData = ref<{ goodsName: string[]; goodsSale: number[] }>({
    goodsName: [],
    goodsSale: []
  });
  if (topSale.value) {
    pieData.value.goodsName = topSale.value.map(item => item.goodsName);
    pieData.value.goodsSale = topSale.value.map(item => item.goodsSale);
  }
  pieRef.value.initChart(pieData);
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
